<script setup></script>

<template>
  <div class="banner">
    <div class="job-primary">
      <el-container>
        <el-main>
          <div class="name">
            <h1>AI大模型实习生</h1>
            <span>150-200/天</span>
          </div>
          <p>
            <i class="iconfont icon-map"></i>
            <a href="#">武汉</a>
            <span>
              <i class="iconfont icon-work"></i>
              本科
            </span>
          </p>
          <div class="btn-container">
            <el-button type="primary" round="true">立即沟通</el-button>
          </div>
        </el-main>
        <el-aside>
          <el-space size="large">
            <a href="">
              <i class="iconfont icon-file"></i>
              完善在线简历
            </a>
            <a href="">
              <i class="iconfont icon-attachment"></i>
              上传简历附件
            </a>
          </el-space>
        </el-aside>
      </el-container>
    </div>
  </div>
  <div class="inner">
    <div class="job-detail">
      <div class="job-detail-section">
        <el-container>
          <el-header>
            <h3>职位描述</h3>
            <ul>
              <li v-for="i in 4" :key="i">keyword{{ i }}</li>
            </ul>
          </el-header>
          <el-main>
            岗位职责
            <br />
            1、开发和优化大模型，包括大语言模型、多模态模型等；
            <br />
            2、在LangChain框架下实现模型训练和推理，并优化系统性能；
            <br />
            3、与团队其他成员合作，共同完成项目开发和迭代。
            <br />
            基本要求
            <br />
            1、计算机科学、人工智能或相关领域
            <br />
            2、对大模型原理有基本理解
            <br />
            3、对LangChain框架有基本的了解和使用经验
            <br />
            4、熟练掌握Python编程，具备良好的代码质量和风格
            <br />
            5、对机器学习有基本的理解，了解常见的机器学习算法和模型
          </el-main>
          <el-footer>
            <el-container>
              <el-aside>
                <div class="detail-figure">
                  <img src="#" alt="" />
                </div>
              </el-aside>
              <el-main>
                <h2>张三</h2>
                <div class="boss-info-attr">Company</div>
              </el-main>
            </el-container>
          </el-footer>
        </el-container>
      </div>
      <div class="company-card">
        <a href="#">
          <h3>公司介绍</h3>
          <el-text line-clamp="3">
            南京飞搏智能交通技术有限公司成立于2015年12月，是专注于智慧工地线上线下综合服务解决方案提供商。
            国家级高新技术企业，双软认证企业，全国唯一经“经信委”授牌的“智慧交通工程联合研发创新中心”，国内第一家由省级政府授牌的工程安全数据中心运营单位。2019年获得交通部科技进步二等奖。拥有1项发明专利，1项商标专利，20余项软件著作权，主编1项省级工程信息化标准，参研6项省级以上课题。是江苏省交通工程建设局、中设设计集团、苏交科集团、中交三航局、中交上航局、江西交投、山西路桥等大型企事业的重要战略合作伙伴。
            由公司独立研发的“平安守护工程安全管控系统”是唯一经交通运输部与中国公路学会共同鉴定的安全信息化产品，应用了大数据、物联网、AI人脸识别、空间感应等先进技术，旨在提高工程施工安全管理工作效率的同时，可以为参建各方提供及时、科学的决策分析。
            相关产品在深中通道、港珠澳大桥、舟山主通道、苏锡常南部高速、五峰山大桥、常泰大桥、南京五桥、南京地铁、太行一号公路、大广高速、京沪高速改扩建等国内重大项目做出技术贡献。服务过的项目超过
            100个，500个施工标段，共计5000亿+造价。
            随着产品在各个机构的深度应用，飞搏人正带着中国标准，走出国门，为全世界的工程建设贡献科技力量
          </el-text>
        </a>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.banner {
  width: 100%;
  background: linear-gradient(90deg, #3b526a 0, #345a6d 100%);
  padding: 18px 0 20px 0;
  .job-primary {
    border: none;
    height: auto;
    padding: 0;
    margin: 0 300px;
    .el-container .el-main {
      .name {
        display: flex;
        padding: 0;
        line-height: 41px;
        height: 41px;
        h1 {
          font-size: 28px;
          font-weight: 600;
          color: #fff;
          line-height: 40px;
          margin-right: 30px;
          margin-top: 1px;
          max-width: 360px;
        }
        span {
          font-size: 34px;
          font-family: kanzhun-Regular, kanzhun;
          color: #f26d49;
          line-height: 41px;
          height: auto;
          font-weight: 400;
          position: relative;
          top: -2px;
        }
      }
      p {
        margin-top: 16px;
        margin-bottom: 0;
        color: #fff;
        a {
          vertical-align: middle;
          margin-left: 6px;
          font-size: 14px;
          color: #fff;
          line-height: 20px;
        }
        span {
          margin-left: 20px;
          font-size: 14px;
          color: #fff;
          line-height: 20px;
          i {
            margin-right: 6px;
          }
        }
      }
      .btn-container {
        margin-top: 10px;
        .el-button {
          width: 150px;
          border-radius: 12px;
          font-size: 18px;
          line-height: 43px;
          height: 45px;
          box-sizing: border-box;
        }
      }
    }
    .el-container .el-aside {
      display: flex;
      text-align: center;
      margin: auto 0;
      a {
        color: #00d1d0;
      }
    }
  }
}

.inner {
  margin: 0 300px;
  margin-top: 16px;
  background: 0 0;
  .job-detail {
    border: none;
    padding-right: 0;
    padding-bottom: 10px;
    .job-detail-section {
      // position: relative;
      background: #fff;
      border-radius: 12px;
      padding: 20px 30px;
      .el-container {
        .el-header {
          display: flex;
          flex-direction: column;
          h3 {
            margin-bottom: 12px;
            font-size: 18px;
            font-weight: 600;
            color: #222;
            line-height: 25px;
          }
          ul {
            display: flex;
            overflow: hidden;
            margin-top: -8px;
            li {
              margin-top: 8px;
              margin-right: 8px;
              font-size: 14px;
              color: #666;
              line-height: 20px;
              float: left;
              padding: 4px 12px;
              white-space: nowrap;
              background: #f8f8f8;
              border-radius: 4px;
            }
          }
        }
        .el-main {
          white-space: pre-wrap;
          word-break: break-all;
          margin-top: 20px;
          margin-bottom: 20px;
          line-height: 28px;
          color: #333;
          font-size: 15px;
          text-align: justify;
          letter-spacing: 0;
        }
        .el-footer {
          .el-container {
            width: 850px;
            height: 58px;
            border-top: 1px solid #ededed;
            .el-aside {
              display: flex;
              align-items: center;
              justify-content: center;
              max-width: 58px;
              .detail-figure {
                border: 1px solid #f6fdfd;
                border-radius: 100%;
                height: 100%;
                width: 100%;
                img {
                  width: 56px;
                  height: 56px;
                  display: block;
                  margin-right: 0;
                }
              }
            }
            .el-main {
              margin: 0;
              padding: 0;
              h2 {
                margin: 0;
                padding: 0;
                margin-left: 20px;
              }
              .boss-info-attr {
                font-size: 15px;
                color: #666;
                line-height: 21px;
                margin-top: 8px;
                margin-left: 20px;
                display: flex;
                align-items: center;
              }
            }
          }
        }
      }
    }
    .company-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px 30px;
      margin-top: 20px;
      .el-text {
        white-space: pre-wrap;
        word-break: break-all;
        margin-top: 20px;
        margin-bottom: 20px;
        line-height: 28px;
        color: #333;
        font-size: 15px;
        text-align: justify;
        letter-spacing: 0;
      }
    }
  }
}
</style>
